<template>
	<view class="ucenter-page">
		<u-navbar title-size="36" :is-back="false" height="42" :border-bottom="false" title="更改联系方式"></u-navbar>
		<view class="content">
			<view class="u-cells">
				<view class="u-cell">
					<view class="u-cell-hd">
						旧号码
					</view>
					<view class="u-cell-bd flex_bd">
						<input type="text" value="" class="ui-input" placeholder="输入绑定手机号"
							placeholder-style="color:#BFBFBF;" />
					</view>
				</view>
				<view class="u-cell">
					<view class="u-cell-hd">
						验证码
					</view>
					<view class="u-cell-bd flex_bd">
						<input type="text" value="" class="ui-input" placeholder="验证码"
							placeholder-style="color:#BFBFBF;" />
					</view>
					<view class="u-cell-ft">
						<button type="default" class="btn">验证码</button>
					</view>
				</view>
				<view class="u-cell">
					<view class="u-cell-hd">
						新号码
					</view>
					<view class="u-cell-bd flex_bd">
						<input type="text" value="" class="ui-input" placeholder="输入新的手机号"
							placeholder-style="color:#BFBFBF;" />
					</view>
				</view>
				<view class="u-cell">
					<view class="u-cell-hd">
						新号码请验证
					</view>
					<view class="u-cell-bd flex_bd">
						<input type="text" value="" class="ui-input" placeholder="输入验证码"
							placeholder-style="color:#BFBFBF;" />
					</view>
					<view class="u-cell-ft">
						<button type="default" class="btn">验证码</button>
					</view>
				</view>
			</view>
			<view class="u-center">
				<view class="u-kefu" @click="show = true">联系客服</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="20" width="92%">
			<view class="popup-content">
				<view class="popup-head">
					<view class="title">联系客服</view>
				</view>
				<view class="popup-body">
					<view class="popup-text">是否拨打客服电话 <text class="tel">400-1234-9876</text></view>
				</view>
				<view class="popup-foot">
					<button type="default" class="btn btn-default"  @click="show = false">取消</button>
					<button type="default" class="btn">拨打</button>
				</view>
			</view>
		</u-popup>
		<view class="u-foot">
			<view class="u-fixed">
				<button type="default" class="btn sign-out">保存</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 16rpx 32rpx;
	}

	.u-cell {
		padding: 20rpx;
		padding-left: 32rpx;
		background-color: #F3F4F6;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.u-cell-hd {
			font-size: 28rpx;
			color: #383842;
			margin-right: 32rpx;
			line-height: 60rpx;
		}

		.u-cell-bd {
			.ui-input {
				font-size: 28rpx;
				height: 60rpx;
			}
		}

		.u-cell-ft {
			.btn {
				font-size: 28rpx;
				color: #FFFFFF;
				background-color: #A2C833;
				line-height: 60rpx;
				border-radius: 6rpx;
				padding: 0 16rpx;
			}
		}
	}

	.u-center {
		padding-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.u-kefu {
			font-size: 28rpx;
			color: #9C9C9C;
			text-align: center;
			border-bottom: 2rpx solid #9C9C9C;
		}
	}



	.u-foot {

		.u-fixed {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 24rpx;

			.sign-out {
				font-size: 36rpx;
				color: #fff;
				line-height: 96rpx;
				border-radius: 48rpx;
				background-color: #A2C833;
			}
		}
	}
	
	.popup-content{
		.popup-head{
			text-align: center;
			padding: 52rpx 70rpx 24rpx;
			.title{
				font-size: 40rpx;
				color: #303337;
				font-weight: 600;
				line-height: 56rpx;
			}
		}
		
		.popup-body{
			padding: 0 70rpx;
			margin-bottom: 52rpx;
			.popup-text{
				text-align: center;
				font-size: 32rpx;
				color: #666666;
				line-height: 52rpx;
				
				.tel{
					color: #A2C833;
				}
			}
		}
		
		.popup-foot{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 48rpx;
			
			.btn{
				font-size: 32rpx;
				color: #fff;
				line-height: 80rpx;
				border-radius: 40rpx;
				width: 220rpx;
				background-color: #A2C833;
				margin: 0 16rpx;
			}
			
			.btn-default{
				background-color: #ECEDED;
				color: #606366;
			}
		}
	}
</style>
